<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">日志管理</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><div class="div2">操作日志</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 查询客户列表 -->
    <div class="query">
      <!-- <p class="header">选择商品</p> -->
      <div class="polling">
        <el-form
          :inline="true"
          ref="form"
          :model="goods"
          label-width=""
          size="mini"
        >
          <el-form-item label="系统模块">
            <el-input
              placeholder="请输入系统模块"
              v-model="goods.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="操作人员">
            <el-input
              placeholder="请输入操作人员"
              v-model="goods.person"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="goods.optType" placeholder="操作类型" clearable>
              <el-option
                v-for="items in brandselect"
                :key="items.dictId"
                :label="items.dictName"
                :value="items.dictId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="goods.status" placeholder="操作状态" clearable>
              <el-option
                v-for="items in options"
                :key="items.dictId"
                :label="items.dictName"
                :value="items.dictId"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="selectDate">
            <span>时间</span>
            <div class="picker">
              <el-date-picker
                v-model="goods.date"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy- MM- dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </div>
          <el-form-item>
            <el-button type="primary" @click="onsearch(1)">搜索</el-button>
            <el-button @click="reset" :loading="loading">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 查询客户列表 -->
    <!-- 分配用户列表 -->
    <div class="table">
      <el-table :data="tableData.list" style="width: 100%">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="title" label="系统模块"></el-table-column>
        <el-table-column
          prop="businessTypeName"
          label="操作类型"
        ></el-table-column>
        <el-table-column
          prop="requestMethod"
          label="请求方式"
        ></el-table-column>
        <el-table-column prop="operName" label="操作人员"></el-table-column>
        <el-table-column prop="operIp" label="主机"></el-table-column>
        <el-table-column prop="statusName" label="操作状态"></el-table-column>
        <el-table-column prop="operTime" label="操作日期"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-tooltip class="item" effect="dark" content="详情" placement="top-start"> -->
            <p
              class="operation"
              v-if="parArray.indexOf('dailydetail') != -1"
              @click="
                dialogFormVisible = true;
                dailyDetail(scope.row);
              "
            >
              详情
            </p>
            <!-- </el-tooltip>		 -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum > 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
    <!-- 对话弹框 -->
    <el-dialog
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      title="操作日志详情"
    >
      <el-form class="elform">
        <div class="label">
          <el-form-item label="操作模块:">
            <span>{{ detail.title }}</span>
          </el-form-item>
          <el-form-item label="请求地址:">
            <span>{{ detail.operIp }}</span>
          </el-form-item>
        </div>
        <div class="label">
          <el-form-item label="登录信息:">
            <span>{{ detail.operName }}</span>
          </el-form-item>
          <el-form-item label="请求方式:">
            <span>{{ detail.requestMethod }}</span>
          </el-form-item>
        </div>
        <el-form-item label="请求参数:">
          <span>{{ detail.operParam }}</span>
        </el-form-item>
        <el-form-item label="操作方式:">
          <span>{{ detail.method }}</span>
        </el-form-item>

        <el-form-item label="返回参数:">
          <span>{{ detail.jsonResult }}</span>
        </el-form-item>
        <div class="label">
          <el-form-item label="操作状态:">
            <span>{{ detail.statusName }}</span>
          </el-form-item>
          <el-form-item label="操作时间:">
            <span>{{ detail.operTime }}</span>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- <el-button type="primary" :loading="btnloading" @click="dialogFormVisible = false;updateBattery()">确 定</el-button> -->
      </div>
    </el-dialog>
    <!-- 对话弹框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: {
        name: "",
        person: "",
        optType: "",
        status: "",
        date: "",
      },
      tableData: [],
      currentPage1: 1,
      brandlist: "",
      options: [],
      brandselect: [],
      dialogFormVisible: false,
      detail: "",
      loading: false,
      limits: "",
      parArray: [],
      pageNo: 1,
      pageSize: 10,
    };
  },
  created() {
    this.listAxios("1");
    this.brandSelectBox();
    // 权限设定判断 normsCode
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "dailyRecordCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断 normsCode
    document.onkeydown = (e) => {
      let key = window.event.keyCode;
      if (key == 13) {
        this.onsearch();
      }
    };
  },
  beforeRouteLeave(to, form, next) {
    document.onkeydown = null;
    next();
  },
  activated() {
    // this.listAxios("1");
    // this.brandSelectBox();
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNo = val;
      this.listAxios();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.listAxios();
    },
    // 模糊搜索
    onsearch() {
      this.pageNo = 1;
      this.listAxios();
    },
    reset() {
      this.loading = true;
      this.goods = {
        name: "",
        person: "",
        optType: "",
        status: "",
        date: "",
      };
      this.pageNo = 1;
      this.pageSize = 10;
      this.listAxios(1);
    },
    // 商品列表
    listAxios() {
      let beginTime = "";
      let endTime = "";
      if (this.goods.date != "") {
        beginTime = this.goods.date[0] + " 00:00:00";
        endTime = this.goods.date[1] + " 23:59:59";
      }
      this.axios
        .post("/sys/v1/operate/log/list", {
          request: {
            beginTime: beginTime,
            businessType: this.goods.optType,
            businessTypes: [],
            endTime: endTime,
            operName: this.goods.person,
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            status: this.goods.status,
            title: this.goods.name,
          },
          version: "",
        })
        .then((res) => {
          //   console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
            setTimeout(() => {
              this.loading = false;
            }, 500);
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 日志详情
    dailyDetail(row) {
      this.axios
        .get("/sys/v1/operate/log/get?id=" + row.operId, {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          //   console.log("日志详情");
          //   console.log(res);
          if (res.code == 0) {
            this.detail = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //** 操作类型 **//
    brandSelectBox() {
      this.axios
        .get("/sys/v1/common/by/group?groupId=" + "business_type", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          //   console.log("操作类型");
          //   console.log(res);
          if (res.code == 0) {
            this.brandselect = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      // 操作状态
      this.axios
        .get("/sys/v1/common/by/group?groupId=" + "business_status")
        .then((res) => {
          //   console.log("操作状态");
          //   console.log(res);
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //** 操作类型 **//
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.elform /deep/.el-form-item__label {
  font-weight: bold;
}
.label {
  /deep/.el-form-item {
    display: inline-block;
    width: 50%;
    vertical-align: middle;
  }
}
.selectDate {
  display: inline-block;
  margin-right: 20px;
  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }
  .picker {
    display: inline-block;
    vertical-align: middle;
  }
  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }
  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }
  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }
  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}
.table {
  margin-top: 10px;
  margin-bottom: 40px;
}
.polling {
  margin-top: 10px;
}
/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}
.query {
  background: #fff;
  padding: 10px;
  .el-form-item {
    display: inline-block;
    margin-right: 20px;
  }
}
.header {
  font-size: 16px;
  color: #2d7edf;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
/deep/ .query .el-input__inner {
  width: 180px;
}
.selectDate {
  display: inline-block;
  margin-right: 20px;
  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }
  .picker {
    display: inline-block;
    vertical-align: middle;
  }
  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }
  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }
  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }
  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}
.operation {
  color: rgb(45, 125, 223);
  cursor: pointer;
  img {
    width: 25px;
    height: 25px;
  }
}
.table {
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }
  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }
  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }
  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
}
.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 5;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
